<template>
  <!--
  <div v-if="showContextMenu" class="context-menu" :style="{ top: `${menuPosition.y}px`, left: `${menuPosition.x}px` }">

    <ul>
      <li class="menu-item">
        <div style="width: 200px; display: flex; justify-content: space-between; align-items: center">
          <div style="width: 120px">添加子节点</div>
          <div style="color: #c0c0c0; font-size: 13px">Ctrl+C</div>
        </div>
      </li>
      <li class="line">
        <div class="split-line"></div>
      </li>
      <li class="menu-item" v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave">
        <div style="width: 200px; display: flex; justify-content: space-between; align-items: center">
          <div style="width: 120px">添加子节点</div>
          <div style="color: #c0c0c0; font-size: 13px">></div>
        </div>
        <div
          v-if="showChildMenu"
          class="context-menu"
          :style="{
            width: '200px',
            position: 'absolute',
            'z-index': 999,
            top: `${childMenuPosition.y}px`,
            left: `228px`,
          }"
        >
          <ul>
            <li class="menu-item">删除节点</li>
            <li class="menu-item">复制节点</li>
            <li class="menu-item">粘贴节点</li>
          </ul>
        </div>
      </li>
      <li class="menu-item">删除节点</li>
      <li class="menu-item">复制节点</li>
      <li class="menu-item">粘贴节点</li>
    </ul>

  </div>
      -->
</template>
<script setup lang="ts">
// import { onMounted, ref } from 'vue';
// const showContextMenu = ref(false); // 是否显示菜单
// const showChildMenu = ref(false);
// const menuPosition = ref({ x: 0, y: 0 }); // 菜单显示的位置
// const childMenuPosition = ref({ x: 0, y: 0 });
// // 鼠标右键监听
// function clickRightMouse(event: { preventDefault: () => void; clientX: number; clientY: number }) {
//   debugger;
//   // 阻止默认事件触发
//   event.preventDefault();

//   // 编写触发自定义逻辑
//   showContextMenu.value = true;
//   menuPosition.value.x = event.clientX - 10;
//   menuPosition.value.y = event.clientY - 10;
// }
// onMounted(() => {
//   document.addEventListener('contextmenu', clickRightMouse);
// });
// function onMouseEnter(e: { clientX: any; clientY: any }) {
//   showChildMenu.value = true;
//   childMenuPosition.x = e.clientX;
//   childMenuPosition.x = e.clientY;
// }
function onMouseLeave(e: any) {}
</script>
<style lang="scss" scoped>
.context-menu {
  position: fixed;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 10px;
  border-radius: 4px;
}
.context-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.context-menu .menu-item {
  position: relative;
  padding: 5px 8px;
  cursor: pointer;
  font-size: 15px;
}
.context-menu .line {
  padding: 3px 8px;
}
.context-menu .split-line {
  width: 100%;
  height: 1px;
  border-top: 1px solid #c0c0c0;
}

.context-menu .menu-item:hover {
  background-color: #f0f0f0;
  border-radius: 5px;
}
</style>
